<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter  Sample解析》 - 飞雪无情的博客</title><meta name="Description" content="专注于IT互联网，包括但不限于Go语言(golang)、Java、Android、Python、项目管理、抖音分析、软件架构等"><meta property="og:title" content="《Flutter  Sample解析》" />
<meta property="og:description" content="
本文主要介绍简单看了下 Flutter 源码中的例子，flutter_gallery。
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.flysnow.org/posts/flutter/Flutter-Sample%E8%A7%A3%E6%9E%90/" />
<meta property="article:published_time" content="2021-07-31T19:08:37+08:00" />
<meta property="article:modified_time" content="2021-07-31T19:08:37+08:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="《Flutter  Sample解析》"/>
<meta name="twitter:description" content="
本文主要介绍简单看了下 Flutter 源码中的例子，flutter_gallery。
"/>
<meta name="application-name" content="飞雪无情的博客">
<meta name="apple-mobile-web-app-title" content="飞雪无情的博客"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://www.flysnow.org/posts/flutter/Flutter-Sample%E8%A7%A3%E6%9E%90/" /><link rel="prev" href="https://www.flysnow.org/posts/flutter/Flutter-UI%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" /><link rel="next" href="https://www.flysnow.org/posts/flutter/Dart%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter  Sample解析》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter-Sample%E8%A7%A3%E6%9E%90\/"
        },"genre": "posts","keywords": "flutter","wordcount":  622 ,
        "url": "https:\/\/www.flysnow.org\/posts\/flutter\/Flutter-Sample%E8%A7%A3%E6%9E%90\/","datePublished": "2021-07-31T19:08:37+08:00","dateModified": "2021-07-31T19:08:37+08:00","publisher": {
            "@type": "Organization",
            "name": "飞雪无情"},"author": {
                "@type": "Person",
                "name": "飞雪无情"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">飞雪无情的博客</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/tools/">工具</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/archives/">归档</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter  Sample解析》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>飞雪无情</a></span>&nbsp;<span class="post-category">included in <a href="/categories/Flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;622 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;2 minutes&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents"></nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍简单看了下 Flutter 源码中的例子，flutter_gallery。</p>
</blockquote>
<p><a href="https://github.com/flutter/flutter/tree/master/examples/flutter_gallery" target="_blank" rel="noopener noreffer">flutter_gallery</a> 是学习 Flutter 的好例子。</p>
<hr>
<h1 id="sizedbox">SizedBox</h1>
<p>例子中多处用到 <a href="https://api.flutter.dev/flutter/widgets/SizedBox-class.html" target="_blank" rel="noopener noreffer">SizedBox</a>。</p>
<blockquote>
<p>A box with a specified size.</p>
</blockquote>
<blockquote>
<p>If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget’s parent). If either the width or height is null, this widget will size itself to match the child’s size in that dimension.</p>
</blockquote>
<blockquote>
<p>If not given a child, SizedBox will try to size itself as close to the specified height and width as possible given the parent’s constraints. If height or width is null or unspecified, it will be treated as zero.</p>
</blockquote>
<p>这个控件中如果不指定子控件，则类似于 android 中的 <a href="https://developer.android.com/reference/android/widget/Space" target="_blank" rel="noopener noreffer">android.view.Space</a> 用于占位。</p>
<p>这个控件中如果指定子控件，则强制子控件大小跟当前控件一致。</p>
<pre><code>SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(child: Text('Hello World!')),
)
</code></pre><p><a href="https://blog.csdn.net/weixin_33716154/article/details/88017225" target="_blank" rel="noopener noreffer">Flutter之SizedBox学习使用 - weixin_33716154的博客 - CSDN博客</a></p>
<h1 id="mainaxisalignment-和-crossaxisalignment">mainAxisAlignment 和 crossAxisAlignment</h1>
<p>Row 和 Column 控件中经常会看到 <a href="https://flutter.dev/docs/development/ui/layout" target="_blank" rel="noopener noreffer">mainAxisAlignment</a> 和 <code>crossAxisAlignment</code> 两个属性。<code>mainAxisAlignment</code> 是主轴，<code>crossAxisAlignment</code> 是交叉轴。具体来说，</p>
<ul>
<li>对于 Row，<code>mainAxisAlignment</code> 是横轴，<code>crossAxisAlignment</code> 是纵轴</li>
<li>对于 Column，<code>mainAxisAlignment</code> 是纵轴，<code>crossAxisAlignment</code> 是横轴</li>
</ul>
<blockquote>
<p>You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.</p>
</blockquote>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/row-diagram.png"
        title="img" /></p>
<ul>
<li><a href="https://blog.csdn.net/yuzhiqiang_1993/article/details/86496145" target="_blank" rel="noopener noreffer">Flutter中MainAxisAlignment和CrossAxisAlignment详解 - 喻志强的博客 - CSDN博客</a></li>
<li><a href="https://blog.csdn.net/hekaiyou/article/details/70849178" target="_blank" rel="noopener noreffer">Flutter进阶—垂直和水平布局 - 咖啡花园 - CSDN博客</a></li>
<li><a href="https://stackoverflow.com/questions/53850149/flutter-crossaxisalignment-vs-mainaxisalignment" target="_blank" rel="noopener noreffer">Flutter crossAxisAlignment vs mainAxisAlignment - Stack Overflow</a></li>
</ul>
<h1 id="图标居中的技巧">图标居中的技巧</h1>
<pre><code>Container(
  width: 56.0,
  height: 56.0,
  alignment: Alignment.center,
  child: Icon(
    demo.icon,
    size: 24.0,
    color: isDark ? Colors.white : _kFlutterBlue,
  ),
),
</code></pre></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/flutter/Flutter-UI%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" class="prev" rel="prev" title="《Flutter UI问题分析小结》"><i class="fas fa-angle-left fa-fw"></i>《Flutter UI问题分析小结》</a>
            <a href="/posts/flutter/Dart%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" class="next" rel="next" title="《Dart入门笔记》">《Dart入门笔记》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">飞雪无情</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
